<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>惰性函数</title>
  </head>
  <body>
    <button id="myButton">点击我</button>
  </body>
</html>
<script>
  // 常规方式：每次调用都要判断
  function addEvent(element, type, handler) {
    if (window.addEventListener) {
      return element.addEventListener(type, handler, false) // 判断浏览器支持的事件处理方式
    } else if (window.attachEvent) {
      return element.attachEvent('on' + type, handler) // IE8及以下版本
    } else {
      element['on' + type] = handler // 其他情况
    }
  }

  // 惰性函数方式
  function addEventLazy(element, type, handler) {
    // 第一次调用时重写函数
    if (window.addEventListener) {
      addEventLazy = function (element, type, handler) {
        element.addEventListener(type, handler, false)
      }
    } else if (window.attachEvent) {
      addEventLazy = function (element, type, handler) {
        element.attachEvent('on' + type, handler)
      }
    } else {
      addEventLazy = function (element, type, handler) {
        element['on' + type] = handler
      }
    }
    // 立即调用新函数
    return addEventLazy(element, type, handler)
  }

  // 使用惰性函数
  const button = document.getElementById('myButton')
  addEventLazy(button, 'click', function () {
    alert('按钮被点击了！')
  })
</script>
